const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  mode: 'production',

  output: {
    filename: '[name]-[contenthash:8].js',
  },

  module: {
    rules: [
      // 配置解析CSS loader
      // {
      //   test: /\.styl$/,
      //   use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"] // compiles Styl to CSS
      // },

      // 图片资源
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name]-[contenthash:8][ext]'
        }
      },
    ]
  },

  plugins: [

    // new MiniCssExtractPlugin({
    //   filename: ({ chunk }) => {
    //     return `${chunk.name.replace("js/", "css/")}-[contenthash:8].css`
    //   }
    // })
  ],

  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          filename: 'js/defaultVendors-[contenthash:8].js'
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  }
}